<template>
  <el-container  class="home-container">
    <div class="background">
      <img :src="imgSrc" width="100%" height="100%" alt="">
    </div>
    <el-header>
      <el-row :gutter="20">
        <el-col :span="6">
          <nav>
            <ul>
              <li class="el-icon-house"><a href="/">主站</a></li>
              <li class="el-icon-user"><a href="/">个人导航</a></li>
            </ul>
          </nav>
        </el-col>
        <el-col :span="15">
          <el-input v-model="query" placeholder="请输入内容" clearable>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="3">
          <div class="login">
            <img src="../../assets/images/header.jpg" alt="">
            <a href="#" @click="$router.push('/login')">登陆</a>
            <a href="#" @click="$router.push('/register')">注册</a>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="220px">
        <div class="brief">
          <img src="../../assets/images/header.jpg" alt="">
          <p class="myname">小明碎碎念</p>
          <div class="count">
            <ul>
              <li>
                <h3>{{total.anum}}</h3>
                <p>文章</p>
              </li>
              <li>
                <h3>{{total.dnum}}</h3>
                <p>日记</p>
              </li>
              <li>
                <h3>{{total.cnum}}</h3>
                <p>评论</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="music">
          <h3>音乐盒</h3>
          <meting-js
          auto="https://music.163.com/#/playlist?id=377143859"
          list-max-height="240px"
          ></meting-js>
        </div>
      </el-aside>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="18">
            <header>
              <div class="left">
                <div class="logo"><a class="iconfont icon-home-color"></a></div>
                <p>首页</p>
              </div>
              <div class="right">
                <ul>
                  <li>
                    <a href="#">
                      <span>硬件奇谈</span>
                      <span class="catecout">11</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <span>硬件奇谈</span>
                      <span class="catecout">11</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <span>硬件奇谈</span>
                      <span class="catecout">11</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <span>硬件奇谈</span>
                      <span class="catecout">11</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <span>硬件奇谈</span>
                      <span class="catecout">11</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <span>硬件奇谈</span>
                      <span class="catecout">11</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <span>硬件奇谈</span>
                      <span class="catecout">11</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <span>硬件奇谈</span>
                      <span class="catecout">11</span>
                    </a>
                  </li>
                </ul>
              </div>
            </header>
            <router-view></router-view>
          </el-col>
          <el-col :span="6">
            <div class="board">
              <h3>公告栏</h3>
              <p>{{message}}</p>
            </div>
            <div class="more">
              <h3>更多功能</h3>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  data () {
    return {
      query: '',
      imgSrc: require('../../assets/images/home.jpg'),
      articles: [],
      comments: [],
      total: {
        anum: 0,
        cnum: 0,
        dnum: 0
      },
      message: '更多功能开发中...'
    }
  }
}
</script>
<style lang="less" scoped>
.home-container {
  height: 100%;
}
.background {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.el-header {
  background-color: #d6dbc7;
  margin-bottom: 20px;
  nav {
    height: 50px;
    ul {
      li {
        float: left;
        height: 50px;
        margin-right: 10px;
        line-height: 50px;
      }
    }
  }
  .el-input {
    margin-top: 10px;
    width: 80%;
  }
  .login {
    display: flex;
    padding-top: 10px;
    justify-content: flex-end;
    align-items: center;
    img {
      height: 30px;
      border-radius: 50%;
    }
    a {
      margin-left: 10px;
      font-size: 16px;
    }
  }
}
.el-aside {
  margin-left: 30px;
  .brief {
    width: 220px;
    height: 300px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
    img {
      display: block;
      margin: 40px auto 20px;
      width: 80px;
      border-radius: 50%;
    }
    .myname {
      text-align: center;
      margin-bottom: 20px;
    }
    .count {
      width: 100%;
      height: 50px;
      margin: 0 auto;
      ul li {
        width: 33.33%;
        float: left;
        text-align: center;
        h3 {
          color: #00a1d6;
          height: 40px;
          line-height: 40px;
        }
      }
    }
  }
  .music {
    margin: 20px 0;
    width: 220px;
    border-radius: 5px;
    background-color: #fff;
    h3 {
      height: 45px;
      line-height: 45px;
      text-align: center;
      border-bottom: 1px #eeeeee solid;
      margin-bottom: 10px;
    }
  }
}
.el-main {
  margin: 0 10px;
  padding: 0;
  header {
    display: flex;
    width: 100%;
    height: 100px;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px 0;
    .left {
      padding: 10px;
      width: 10%;
      height: 100%;
      text-align: center;
      border-right: 1px solid #eeeeee;
      .logo {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #ff5c7c;
        margin: 0px auto 5px;
        text-align: center;
        line-height: 40px;
      }
    }
    .right {
      flex: 1;
      padding: 5px 10px;
      li {
        float: left;
        width: 25%;
        height: 40px;
        margin-bottom: 5px;
        a {
          color: #5a5a5a;
          .catecout {
            display: inline-block;
            width: 25px;
            height: 18px;
            line-height: 20px;
            font-size: 10px;
            text-align: center;
            color: #fff;
            background-color: #73c9e5;
            margin-left: 5px;
          }
        }
      }
    }
  }
  .board {
    width: 220px;
    height: 100px;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    h3 {
      text-align: center;
      height: 30px;
      border-bottom: 1px solid #eee;
      margin-bottom: 5px;
    }
  }
}

</style>
